<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<headers title="分类"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <!--<div class="search">-->
            <!--<form action='' target='MemberList' @submit="CheckPost()">-->
              <!--<mt-search placeholder="搜索" v-model="searched"></mt-search>-->
            <!--</form>-->
          <!--</div>-->
          <div class="fenlei-list">
            <div class="left">
              <ul class="list-box">
                <li v-for='item in navList' :class="{active:isactive==item.id,'fenlei-cell':true}" :key=item.id
                    @click="handleActive(item.id)">
                  <span class="fenlei-cell-title">{{item.kindname}}</span>
                </li>
              </ul>
            </div>
            <div class="right">
              <div class="sublist-box">
                <div class="banner">
                  <img :src="bannerImg" alt="">
                </div>
                <div class="menu">
                  <ul>
                    <li v-for="(item,index) in dataList" :key="item.id">
                      <a href="javascript:;" @click="toNext(index)">
                        <img :src="item.img" alt=""><span>{{item.kindname}}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部的 Tabbar 区域 -->
    <div class="footer">
      <mt-tabbar class="tabbar">
        <mt-tab-item id="tab1">
          <img slot="icon" src="./../assets/images/ico_home_1@1x.png" @click="disTrueHome">
          首页
        </mt-tab-item>
        <mt-tab-item id="tab2" class="MemberlistNow">
          <img slot="icon" src="./../assets/images/ico_fenlei_2@1x.png" @click="toMemberContainer">
          分类
        </mt-tab-item>
        <mt-tab-item id="tab3">
          <img slot="icon" src="./../assets/images/ico_dianpu_1@1x.png" @click="toShops">
          店铺
        </mt-tab-item>
        <mt-tab-item id="tab4">
          <img slot="icon" src="./../assets/images/ico_wode_1@1x.png" @click="tomyHomeFX">
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
    <loading v-show="showLoading || loadRatings"></loading>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
  </div>

</template>

<script>
  /* eslint-disable no-unused-vars */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import { mapState, mapGetters, mapActions } from 'vuex'
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'MemberContainer',
    data () {
      return {
        navList: [],
        dataList: '',
        cacheData: [],
        isactive: '',
        showmemberList: false,
        showLoading: true, //显示加载动画
        bannerImg: '',
        fid: 0,
        id: 0,
        kindname: '',
        searched: '',
        showAlert:false,
        alertText:null
      }
    },
    created () { // 生命周期
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },1)
      this.getGoods()
    },
//    updated (){
//      console.log(this.searched)
//    },
    methods: {// 方法
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert =false
      },
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      CheckPost() {

      },
      ...mapActions(['addAction', 'reduceAction']),
      handleActive (id) {
        this.isactive = id
        this.navList.forEach((item) => {
          if (item.id - 0 === this.isactive - 0) {
            this.bannerImg = item.img
          }
        })
        this.dataList = this.cacheData[this.isactive]
      },
      getGoods () {
        const jsonValue = JSON.stringify({
          'c': '10007',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,  // 帐号
            'tokenId': token()
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
            this.hideLoading();
            this.navList = JSON.parse(res.data.p.fistClass)
            console.log(this.navList)
            this.isactive = this.navList[0].id
            this.cacheData = JSON.parse(res.data.p.secondClass)
            console.log(this.cacheData)
            this.dataList = this.cacheData[this.isactive]
            this.bannerImg = this.navList[0].img
          }else{
            this.hideLoading();
            this.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorCode === 90) {
              this.go = ()=> {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }
          }
        }, (res) => {
          this.alertTip('网络错误');
          this.go = function(){
             this.showAlert = false;
          }
        })
      },
      disTrueHome () {
        this.$router.push({name: 'disTrueHome'})
      },
      toMemberContainer () {
        this.$router.push({name: 'MemberContainer'})
      },
      toShops() {
        console.log(JSON.parse(window.localStorage.loginP).hasOwnProperty('shop'));
        if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
          localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
          this.$router.push({name: 'Shops'})
        } else {
          this.$router.push({name: 'NewShop'});
        }
      },
      tomyHomeFX () {
        this.$router.push({name: 'myHomeFX'})
      },
      toNext (index) {
        console.log(this.dataList[index].kindname)
        console.log(this.dataList[index].fid)
        console.log(this.dataList[index].id)
        localStorage.setItem('FL',JSON.stringify({
          'fid':this.dataList[index].fid, // 1级分类id
          'id':this.dataList[index].id, // 2级分类id
          'kindname':this.dataList[index].kindname
        }))
        this.$router.push(
          {name: 'MemberList'}
        )
      }
    },
    components: {
      ...mapGetters(['getCount'])
    }
  }
</script>

<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0 94px;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .app-cont {
    .tabbar {
      position: fixed;
      box-sizing: border-box;
      height: 94px;
      border-top: 1px solid #f3f3f3;
      color: #898d93;
    }
  }

  .fenlei {
    ::-webkit-scrollbar {
      display: none;
    }
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    .search {
      width: 100%;
      height: 100px;
      padding: 0 0 10px 0;
    }
    .fenlei-list {
      width: 100%;
      flex: 1;
      display: flex;
      .left {
        width: 147px;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        .list-box {
          width: 100%;
        }
      }
      .right {
        flex: 1;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        .sublist-box {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .banner {
            width: 100%;
            box-sizing: border-box;
            padding: 30px 30px 40px 30px;
            > img {
              display: block;
              width: 431px;
              height: 170px;
            }
          }
          .menu {
            width: 100%;
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            > ul {
              width: 100%;
              height: 100%;
              overflow: hidden;
              overflow-y: auto;
              > li {
                float: left;
                width: 160px;
                height: 170px;
                list-style: none;
                border: 1px solid transparent;
                margin-bottom: 18px;
                > a {
                  height: 100%;
                  display: block;
                  text-decoration: none;
                  padding-top: 18px;
                  box-sizing: border-box;
                  > img {
                    display: block;
                    width: 100px;
                    height: 100px;
                    margin: 0 0 16px 35px;
                    /*border:1px solid #ccc;*/
                  }
                  > span {
                    display: block;
                    text-align: center;
                    color: #29292c;
                    font-size: 22px;
                    margin-top: 0;
                  }
                }
              }
            }
          }
        }

      }

    }
  }

</style>
<style lang="scss">
  .MemberlistNow .mint-tab-item-label {
    color: #fe3f22;
  }

  .fenlei .mint-search {
    width: 100%;
    height: 102px;
  }

  .fenlei .mint-searchbar {
    padding: 20px 32px;
    background-color: #f4f4f4;
  }

  .fenlei .mint-searchbar-inner {
    border-radius: 31px;
    height: 60px;
  }

  .fenlei .mint-searchbar-inner .mintui-search {
    font-size: 38px;
    margin-right: 18px;
  }

  .fenlei .mint-searchbar-cancel {
    display: none;
  }

  .fenlei-list {
    .fenlei-cell {
      height: 80px;
      box-sizing: border-box;
      background-color: #f4f4f4;
      padding: 20px 10px;
      user-select: none;
      line-height: 1;
      &.active {
        background-color: #fff;
        > .fenlei-cell-title {
          border-left: 3px solid #fe3416;
          color: #fd4c2e;
          padding-left: 5px;
          font-size: 28px;
        }
      }
      .fenlei-cell-title {
        &.active {
          border-left: 3px solid #fe3416;
          color: #fe3416;
        }
        border-left: 3px solid transparent;
        text-align: center;
        line-height: 1;
        font-size: 28px;
        color: #34333b;
        padding-left: 5px;
      }
    }
  }
</style>
